<template>
    <div class="souye">

        <!-- 标题头 -->
        <mt-header title="约苗" class="mt-header">
            <mt-button icon="more" slot="right" @click="showShare = true"></mt-button>
            <mt-button slot="left" @click="show = true" style="margin-top:10px">
                <img src="../assets/souye/weizhi.png" style="width:25px; height:25px">
                <span>{{city}}</span>
            </mt-button>
        </mt-header>
        
        <!-- 分享 -->
        <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        lock-scroll
        />

        <!-- 轮播图 -->
        <mt-swipe :auto="4000" class="mt-swipe" 
        :style="{height:h}">
             <mt-swipe-item>
                <img src="../assets/souye/lunbo/lunbo_01.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/souye/lunbo/lunbo_02.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/souye/lunbo/lunbo_03.jpg">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../assets/souye/lunbo/lunbo_04.png">
            </mt-swipe-item>
        </mt-swipe>

        <!-- 公告 -->
        <van-notice-bar
        class="my-van-bar"
        color="#1989fa" 
        background="#ecf9ff"
        left-icon="volume-o" 
        :scrollable="false">
        <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="4000"
            :show-indicators="false">
                <van-swipe-item>
                    接种新冠疫苗全民免费
                </van-swipe-item>
                <van-swipe-item>
                    疫苗价格新史低
                </van-swipe-item>
                <van-swipe-item>
                    服务器维护请谅解
                </van-swipe-item>
                <van-swipe-item>
                    点击右上角即可分享本网站
                </van-swipe-item>
        </van-swipe>
        </van-notice-bar>

        <!-- 图标 -->
        <!-- <ul class="tubiao">
            <li  v-for="p of tubiao" :key="p.id">
            <router-link to="/about">
                <img :src="require(`../assets/souye/lunbo/${p.m_img}`)">
                <div>
                <p>{{p.m_title}}</p>
                <p>{{p.ss_title}}</p>
                </div>
            </router-link>
            </li>
        </ul> -->

        <ul class="tubiao">
            <li v-for="p of tubiao" :key="p.id">
            <router-link :to="`/about?id=${p.id}`">
                <img :src="require(`../assets/souye/lunbo/${p.m_img}`)">
                <div>
                <p>{{p.m_title}}</p>
                <p>{{p.ss_title}}</p>
                </div>
            </router-link>
            </li>
        </ul>
        <ul class="tubiao">
            <li v-for="o of tb" :key="o.id">
            <router-link :to="`/about?id=${o.id}`">
                <img :src="require(`../assets/souye/lunbo/${o.m_img}`)">
                <div>
                <p>{{o.m_title}}</p>
                <p>{{o.ss_title}}</p>
                </div>
            </router-link>
            </li>
        </ul>
        
        <!-- 两个卡片 -->
        <van-grid
        class="my-van-grid"
        :border="false" 
        :column-num="2"
        gutter="0"
        :center="false">
            <van-grid-item>
                <router-link to="/kepu">
                    <div class="my-ab_01">
                        <div class="my_marigin_2">
                            <span>新冠专区</span>
                            <p>新冠疫苗预约</p>
                        </div>
                        <div class="my-img_02 my_marigin_1">
                            <img src="../assets/souye/yimiao.png">
                        </div>
                    </div>
                </router-link>
            </van-grid-item>
            <van-grid-item>
                <router-link to="/kepu">
                    <div class="my-ab_02">
                        <div class="my_marigin_2">
                            <span>儿童专区</span>
                            <p>儿童疫苗预约</p>
                        </div>
                        <div class="my-img_02 my_marigin_1">
                            <img src="../assets/souye/ertong.png">
                        </div>
                    </div>
                </router-link>
            </van-grid-item>
        </van-grid>

        <!-- 健康服务 -->
        <div class="my-jiankang">健康服务</div>
        <!-- 六宫格 -->
        <div class="my_liu">
        <van-grid
        class="my-van-grid"
        :border="false" 
        :column-num="3"
        gutter="0"
        :center="false">
            <van-grid-item  v-for="i of liugong" :key="i.id">
                <router-link to="kepu">
                <div class="my-ab_03">
                    <div class="my_marigin_1">
                        <span class="my_span_text">{{i.m_title}}</span>
                        <p class="my_p">{{i.s_title}}</p>
                    </div>
                    <div class="my-img_03 my_marigin_3">
                        <img :src="require(`../assets/souye/liugong/${i.m_img}`)">
                    </div>
                </div>
                </router-link>
            </van-grid-item>
        </van-grid>
        </div>

        <!-- 选苗攻略 -->
        <div class="my-gl">选苗攻略</div>

        <!-- 内容 -->
        <div style="margin-bottom:57px">
           <div  v-for="i of wz" :key="i.id">
            <router-link :to="`/article?id=${i.id}`" class="my_d_flex">
            <!-- 图片 -->
            <div class="my_imag">
                <img :src="require(`../assets/souye/wenzhang/${i.tupian}`)">
            </div>
            <!-- 内容 -->
            <div class="my_ml_3 w-100">
                <div class="my_biaoti">
                    {{i.biaoti}}
                </div>
                <div class="my_yanse">
                    <div>
                        {{i.xbiaoti}}
                    </div>
                    <div>{{i.kanguo}}</div>
                </div>
            </div>
            </router-link>
           </div>
        </div>

        <!-- 回到顶部 -->
        <nut-backtop
        :distance="50"
        :duration="1000"
        :bottom="77"
        >
        <img src="../assets/souye/top.png" style="width:33px;height:33px;">
        </nut-backtop>

           <!-- 底部选择卡 -->
           <van-tabbar
           v-model="active"
           class="my_van_tabbar"
           active-color="#4fc08d" 
           inactive-color="#000"
           route>
                <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
                <van-tabbar-item to="/yuyue" icon="location-o">预约</van-tabbar-item>
                <van-tabbar-item to="/kepu" icon="newspaper-o">科普</van-tabbar-item>
                <van-tabbar-item to="/me" icon="user-circle-o">我的</van-tabbar-item>
            </van-tabbar>

        <!-- 地址弹出 -->
        <van-action-sheet v-model="show" 
        @cancel="onCancel"
        >
            <!-- 选择城市 -->
            <van-area
            cancel-button-text=""
            @cancel="show=false"
            @confirm="cs"
            title="地区"
            :area-list="areaList"
            />
        </van-action-sheet>

    </div>
</template>

<script>
export default {
   data(){
       return{
           h:"187",
           active:1,
           arr:6,
           arr2:4,
           arr3:4,
           tubiao:[],
           tb:[],
           liugong:[],
           wz:[],
           show:false,
           //地址城市
           city:"未定位",
            // 分享本网站   
            showShare: false,
            options: [
            { name: '微信', icon: 'wechat' },
            { name: '微博', icon: 'weibo' },
            { name: '复制链接', icon: 'link' },
            { name: '分享海报', icon: 'poster' },
            { name: '二维码', icon: 'qrcode' },
        ],
        //假数据
                areaList: {
                    province_list: {
                      110000: '山东省'
                    },
                    city_list: {
                      110100: '济南市',
                      110200: '青岛市'
                    },
                    county_list: {
                      110101: '东城区',
                      110102: '西城区',
                      110105: '历下区',
                      110106: '槐荫区',
                      110201: '和平区',
                      110202: '河东区',
                      110203: '河西区',
                      110204: '南开区',
                      110205: '河北区'
                    }
                }
       }
   },
   methods:{
       cs(picker){
           console.log(picker)
           console.log(picker)
           
           this.city=picker[1].name
           this.show=false
           
       },
       //异步加载文章
      //  loadArticles(id,callback){
      //    let url = `/article?id=${id}`
      //    this.axios.get(url).then(result=>{
      //      callback(result.data.results)
      //    })
      //  },
       //
       onCancel(){}
   },
   mounted(){
        //初始化适配轮播图的高度
        let picwidth=400;
        let picheight=200;
        //屏幕的宽度
        let screenwidth=window.screen.width
        //计算对应宽度的高度
        let height=((picheight*screenwidth)/picwidth)+"px"
        //把当前计算到的高度，赋值给h
        this.h=height

        //百度地图
        //获取当前位置
        let gl=window.navigator.geolocation;
        gl.watchPosition(result=>{
            let long=result.coords.longitude
            let lat=result.coords.latitude
            var point = new BMap.Point(long,lat);  // 创建点坐标 
            //地址解析
                //地址解析器.getLocation()可以通过经纬度返回地名
                let geoc=new BMap.Geocoder();
                geoc.getLocation(point,(res)=>{
                    console.log(res.addressComponents.city)
                    this.city=res.addressComponents.city
                })
        })

        //获取图标与相关信息
        this.axios.get("/tubiao",
            {
                params:{tb_id:1}
            }).then(result=>{
            //console.log(result.data.results)
            this.tubiao=result.data.results
        })
        //获取图标与相关信息2
        this.axios.get("/tb",
            {
                params:{tb_id:4}
            }).then(result=>{
            //console.log(result.data.results)
            this.tb=result.data.results
        })
        //六宫格
        this.axios.get("/liugong",
            {
                params:{tb_id:2}
            }).then(result=>{
            //console.log(result.data.results)
            this.liugong=result.data.results
        })
        //获取文章
        this.axios.get("/wz").then(result=>{
            //console.log(result.data.results)
            this.wz=result.data.results
        })
    }
}
</script>

<style>
/* 顶部标题颜色 */
.souye .mt-header{
    background-color: #4fc08d;
}
/* 轮播图 */
.souye .mt-swipe img{ width: 100%;}
/* 公告 */
.souye .my-van-bar{margin-top: 5px;}
.souye .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
/* 图标设置样式 */
.souye .tubiao{
    display: flex;
    justify-content: space-around;
    margin-top: 4px;
    margin-bottom: 0px;
    text-align: center;
}
/* 图标 */
.souye .tubiao img{
    width: 30px;
    height: 30px;
}
.souye .tubiao p{
    margin-top: 5px;
    font-size: small;
    margin-bottom: 0px;
}
.souye .tubiao p:last-child{
    margin-top: 0px;color: #999;font-size: 5px;
    margin-bottom:15px ;
}
.souye .tubiao p:first-child{
    color: black;
}
 /* 两个卡片 */
/* 设置字体 */
.souye .my_marigin_2{margin-top: 8px;}
.souye .my_marigin_1{margin-left: 8px;}
.souye .my-van-grid div span{
    color: white;font-weight: bold;font-size: 18px;
}
.souye .my-van-grid div p{
    color: white;font-weight:bold;font-size: 5px;
}
/* 设置背景颜色 */
.souye .my-ab_01{
    background-color: #6EB1F8;
    display: flex;
    align-items: center;
    justify-content: center;
}
.souye .my-ab_02{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FBD666;
}
/* 设置两个卡片里面的图片 */
.souye .my-img_02{
    width: 40px;height: 40px;
}
.souye .my-img_02 img{
    width: 100%;margin-left: 10px;
}
/* 健康服务 */
.souye .my-jiankang{
    font-weight: bold;margin-left: 10px;font-size: 18px;margin-bottom: 18px;
}
/* 六宫格  */
/* 设置字体 */
.souye .my_marigin_1 .my_span_text{
    color: #000;font-weight: bold;font-size: 15px;
}
.souye .my_marigin_1{
    margin-top: 8px;
}
/* 设置颜色 */
.souye .my-ab_03{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #F7F8FC;
}
/* 设置图片大小 */
.souye .my-img_03{
    width: 28px;height: 28px;
    /* padding-right: 5px; */
    margin-right: 10px;
}
.souye .my-img_03 img{
    width: 100%;
}
/* 小标签 */
.souye .my-van-grid .my_p{
    color:white;font-size: 1px;background-color: red;
    width: 50%;border-radius: 5px;text-align: center;
    font-weight: 100;
}
.souye .my_liu .van-grid-item__content{
    padding: 2px 3px;
}
/* 选苗攻略 */
.souye .my-gl{
    font-weight: bold;margin-left: 10px;font-size: 18px;
    margin-bottom: 18px;margin-top: 12px;
}
/* 总外部样式 */
.souye .my_d_flex{display: flex;margin-left: 10px;
  margin-right: 10px;margin-top: 12px;
}
/* 文章内容标题 */
.souye .my_biaoti{
  font-size: 16px;
  font-weight: bold;color: black;
}
/* 文章于图片之间的距离 */
.souye .my_ml_3{
    margin-left: 12px;display: flex;
    flex-direction: column;justify-content: space-between;
}
/* 文章内容文字颜色 */
.souye .my_yanse{
    display: flex;
    justify-content: space-between;
    color: #999;font-size: 12px;
}
/* 设置文章图片大小 */
.souye .my_imag img {
  width: 70px;
  height: 70px;
  border-radius: 5px;
}
/* 底部选择卡 */

</style>